Progress Bar এবং Progress Circle Chart হলো ইন্টারঅ্যাকটিভ ভিজ্যুয়াল উপস্থাপনাগুলি যা কোনো নির্দিষ্ট কাজ বা প্রকল্পের অগ্রগতি দেখাতে ব্যবহৃত হয়। Google Charts এর মাধ্যমে খুব সহজেই এই ধরনের চার্ট তৈরি করা যেতে পারে, যা প্রকল্প বা কাজের অগ্রগতি, শতাংশ সম্পূর্ণতা বা অন্যান্য গাণিতিক বিশ্লেষণ দেখাতে সহায়তা করে।
১. Progress Bar তৈরি করা
Progress Bar সাধারণত রৈখিকভাবে কাজের অগ্রগতি প্রদর্শন করতে ব্যবহৃত হয়। এটি একটি সরল উপায়ে কাজের সম্পূর্ণতার শতাংশ দেখানোর জন্য উপকারী।
HTML এবং JavaScript কোড উদাহরণ
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Google Progress Bar Example</title>
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript">
// Google Charts লাইব্রেরি লোড করা
google.charts.load('current', {'packages':['gauge']});
// কলব্যাক ফাংশন
google.charts.setOnLoadCallback(drawChart);
// Progress Bar তৈরি করার ফাংশন
function drawChart() {
var data = google.visualization.arrayToDataTable([
['Label', 'Value'],
['Progress', 60] // এখানে 60% অগ্রগতি দেখানো হচ্ছে
]);
var options = {
width: 400, height: 120,
redFrom: 90, redTo: 100,
yellowFrom: 75, yellowTo: 90,
greenFrom: 0, greenTo: 75,
minorTicks: 5
};
var chart = new google.visualization.Gauge(document.getElementById('progress_bar'));
chart.draw(data, options);
}
</script>
</head>
<body>
<h2>Google Progress Bar Example</h2>
<div id="progress_bar" style="width: 400px; height: 120px;"></div>
</body>
</html>
কোড ব্যাখ্যা
- Google Charts লাইব্রেরি লোড করা:
google.charts.load('current', {'packages':['gauge']});লাইনে gauge প্যাকেজটি লোড করা হয়েছে, যেটি Progress Bar তৈরি করতে ব্যবহৃত হয়। - ডেটা তৈরি করা:
google.visualization.arrayToDataTable()ফাংশন দিয়ে Progress Bar এর জন্য ডেটা তৈরি করা হয়েছে। এখানে 60 শতাংশ অগ্রগতি দেখানো হয়েছে। - অপশন সেট করা:
redFrom,yellowFrom,greenFrom: এগুলি প্রগ্রেস বারটির বিভিন্ন অংশের রঙ নির্ধারণ করে।minorTicks: এটি ছোট টিক মার্কের সংখ্যা নির্ধারণ করে।
- চার্ট তৈরি করা:
google.visualization.Gauge()ফাংশন ব্যবহার করে Progress Bar তৈরি এবং প্রদর্শন করা হয়েছে।
২. Progress Circle Chart তৈরি করা
Progress Circle Chart হল একটি রাউন্ড (circle) আকারের চার্ট যা প্রকল্প বা কাজের অগ্রগতি দেখাতে ব্যবহৃত হয়। এটি গোলাকার আকারে কাজের সম্পূর্ণতার শতাংশ প্রদর্শন করে।
HTML এবং JavaScript কোড উদাহরণ
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Google Progress Circle Example</title>
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript">
// Google Charts লাইব্রেরি লোড করা
google.charts.load('current', {'packages':['corechart', 'pie']});
// কলব্যাক ফাংশন
google.charts.setOnLoadCallback(drawChart);
// Progress Circle তৈরি করার ফাংশন
function drawChart() {
var data = google.visualization.arrayToDataTable([
['Task', 'Percentage'],
['Completed', 70], // এখানে 70% সম্পূর্ণ হয়েছে
['Remaining', 30]
]);
var options = {
title: 'Task Progress',
pieSliceText: 'percentage',
is3D: true,
slices: {
0: {offset: 0.1, color: '#4caf50'}, // Completed স্লাইসের রঙ
1: {offset: 0.1, color: '#f44336'} // Remaining স্লাইসের রঙ
}
};
var chart = new google.visualization.PieChart(document.getElementById('progress_circle'));
chart.draw(data, options);
}
</script>
</head>
<body>
<h2>Google Progress Circle Example</h2>
<div id="progress_circle" style="width: 400px; height: 400px;"></div>
</body>
</html>
কোড ব্যাখ্যা
- Google Charts লাইব্রেরি লোড করা:
google.charts.load('current', {'packages':['corechart', 'pie']});লাইনে corechart এবং pie প্যাকেজ লোড করা হয়েছে, যা Progress Circle তৈরি করতে সহায়তা করে। - ডেটা তৈরি করা:
google.visualization.arrayToDataTable()এর মাধ্যমে আমরা Progress Circle এর ডেটা তৈরি করেছি, যেখানে Completed টাস্কের জন্য 70% এবং Remaining টাস্কের জন্য 30% প্রদর্শিত হয়েছে। - অপশন সেট করা:
pieSliceText: 'percentage': এটি স্লাইসগুলোর ভিতরে শতাংশ প্রদর্শন করবে।is3D: true: এটি গোলাকার চার্টটিকে 3D প্রভাব দিবে।slices: এর মাধ্যমে Completed এবং Remaining স্লাইসের রঙ নির্ধারণ করা হয়েছে।
- চার্ট তৈরি করা:
google.visualization.PieChart()ফাংশন ব্যবহার করে Progress Circle তৈরি এবং প্রদর্শন করা হয়েছে।
উপসংহার
Progress Bar এবং Progress Circle হল অগ্রগতি প্রদর্শনের জন্য খুবই কার্যকরী এবং সহজ টুল। Google Charts এর মাধ্যমে এই ধরনের চার্ট তৈরি করা খুবই সহজ এবং এটি ব্যবহারকারীদের কাজের অগ্রগতি সম্পর্কে স্পষ্ট ধারণা দেয়। আপনি এই চার্টগুলো বিভিন্ন প্রকল্প, কাজ, বা অ্যাপ্লিকেশনে ব্যবহার করে কাজের অগ্রগতি ট্র্যাক করতে পারবেন।
Read more
